<template>
  <div class="disbox">
    <!-- 轮播图 -->
    <el-carousel :interval="4000"
      type="card"
      height="200px">
      <el-carousel-item v-for="(item,index) in banner"
        :key="index">
        <img class="bannerImg"
          :src="item.imageUrl" />
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐歌单 -->
    <h3>推荐歌单</h3>
    <br />
    <el-row>
      <el-col :span="4"
        v-for="(item, index) in list"
        :key="index"
        :offset="index > 0 ? 1 : 0"
        class="iconfont">
        <el-card :body-style="{ padding: '0px' }"
          shadow="hover">
          <img :src="item.picUrl"
            class="image" />
          <div style="padding: 14px;">
            <span class="over">{{item.name}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 推荐音乐 -->
    <br />
    <h3>推荐音乐</h3>
    <br />
    <div class="newSongs">
      <div class="songBox"
        v-for="(item,index) in songs"
        :key="index">
        <div class="songleft"
          @click="playMusic(item.id)">
          <img :src="item.picUrl" />
          <i class="el-icon-video-play songicon"></i>
        </div>
        <div class="songright">
          <span class="songone">{{item.name}}</span>
          <span class="songtwo">{{item.song.artists[0].name}}</span>
        </div>
      </div>
    </div>
    <!-- 推荐MV -->
    <div class="mvs">
      <br />
      <h3 class="title">推荐MV</h3>
      <br />
      <div class="items">
        <div class="item"
          v-for="(item,index) in mvs"
          :key="index">
          <div class="img-wrap">
            <img :src="item.picUrl" />
            <i class="el-icon-video-play mvicon"></i>
            <div class="num-wrap">
              <div class="num">{{item.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{item.copywriter}}</div>
            <div class="singer">{{item.artistName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "discovery",
  data() {
    return {
      //轮播图
      banner: [],
      //推荐歌单
      list: [],
      //最新音乐
      songs: [],
      mvs: [],
    };
  },
  created() {
    //轮播图
    axios({
      url: "https://autumnfish.cn/banner",
      method: "get",
      params: {},
    }).then((res) => {
      this.banner = res.data.banners;
    });
    //推荐歌单
    axios({
      url: "https://autumnfish.cn/personalized",
      method: "get",
      params: {
        limit: "5",
      },
    }).then((res) => {
      this.list = res.data.result;
    });
    //推荐音乐
    axios({
      url: "https://autumnfish.cn/personalized/newsong",
      method: "get",
      params: {},
    }).then((res) => {
      this.songs = res.data.result;
    });
    //推荐MV
    axios({
      url: "https://autumnfish.cn/personalized/mv",
      method: "get",
    }).then((res) => {
      //console.log(res.data.result);
      this.mvs = res.data.result;
    });
  },
  methods: {
    playMusic(id) {
      axios({
        url: "https://autumnfish.cn/song/url",
        method: "get",
        params: {
          id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        this.$store.state.musicUrl = url;
      });
    },
  },
};
</script>

<style scoped>
.disbox {
  width: 1100px;
  margin: 0 auto;
}
.bannerImg {
  width: 100%;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.over {
  display: block;
  font-size: 12px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}
.songBox {
  display: inline-block;
  width: 45%;
  padding: 10px;
}
.songBox:hover {
  background: rgb(202, 215, 230);
}

.songleft {
  float: left;
  width: 100px;
  height: 100px;
  position: relative;
}
.songleft .songicon {
  display: none;
  position: absolute;
  right: 5px;
  bottom: 5px;
  background: white;
  color: orange;
  opacity: 0.9;
  font-size: 26px;
  border-radius: 50%;
}
.songleft:hover {
  cursor: pointer;
}
.songleft:hover .songicon {
  display: block;
}
.songleft img {
  width: 100%;
}
.songright {
  height: 100px;
  width: 200px;
  position: relative;
  display: inline-block;
}
.songright .songone {
  position: absolute;
  top: 10px;
  left: 10px;
}
.songright .songtwo {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.mvs .items {
  display: flex;
  justify-content: space-around;
}

.mvs .items .item {
  width: 250px;
  cursor: pointer;
}

.mvs .items .item .img-wrap {
  width: 100%;
  position: relative;
}
.img-wrap .mvicon {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: white;
  color: orange;
  opacity: 0.9;
  font-size: 26px;
  border-radius: 50%;
}
.img-wrap:hover .mvicon {
  display: block;
}
.mvs .items .item .img-wrap img {
  width: 100%;
  border-radius: 5px;
}

.mvs .items .item .img-wrap .num-wrap {
  position: absolute;
  color: white;
  top: 0;
  right: 0;
  display: flex;
  align-content: center;
  font-size: 15px;
  padding-right: 5px;
  padding-top: 2px;
}

.mvs .items .item .img-wrap .num-wrap .icon-play {
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.mvs .items .item .info-wrap .name {
  font-size: 15px;
  margin-bottom: 5px;
}

.mvs .items .item .info-wrap .singer {
  font-size: 14px;
  color: #c5c5c5;
}
.iconfont {
  cursor: pointer;
}
</style>